<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>使用smartUplaod 上传加预览</title>
</head>
<body>
<h2>文件上传</h2>
<form action="<%=request.getContextPath()%>/SmartUploadServlet" method="post" enctype="multipart/form-data">
    上传文件1：<img id="pic" src="<%=request.getContextPath()%>/images/co.png">
    <input id="upload" name="myfile1" accept="image/*" type="file" /><br>
    <input type="submit" value="提交"><br>
    ${result}
</form>
<script type="text/javascript">
        $(function() {
            $("#pic").click(function() {
                $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
                $("#upload").on("change", function() {
                    var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
                    if (objUrl) {
                        $("#pic").attr("src", objUrl); //将图片路径存入src中，显示出图片
                    }
                });
            });
        });

    //建立一个可取到该file的url
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
</script>
</body>
</html>
